<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <style>
        .container {
            display: flex;
            flex-direction: column; /* 更改为垂直排列 */
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            height: 30vh; /* 使用视口高度 */
        }
        button {
            margin-top: 10px; /* 在按钮上方添加一些空间 */
            padding: 10px 20px; /* 按钮内边距 */
            font-size: 16px; /* 按钮字体大小 */
            color: #fff; /* 按钮字体颜色 */
            background-color: #007bff; /* 按钮背景颜色 */
            border: none; /* 无边框 */
            border-radius: 10px; /* 圆角边框 */
            cursor: pointer; /* 鼠标悬停时显示指针 */
            outline: none; /* 移除点击时的轮廓线 */
        }
        button:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<div class="container">
    <p id="myp" style="color: #f00;font-size: 30px;">chiqingsan</p>
    <button onclick="sendMessage()">向ArkTS发送消息</button>
</div>

</body>

<script>
    var currentPort
    // 订阅事件监听
    window.addEventListener("message", (event) => {
       if(event.data === "trans_port") {
          currentPort = event.ports[0]
          if(currentPort) {
             // alert("端口接收成功")
             currentPort.onmessage = (event) => {
                document.getElementById("myp").innerText = JSON.parse(event.data).message
             }
          }
       }
    })

    // 定义一个发送消息的函数
    function sendMessage(){
        if (currentPort) {
            // 使用端口发送消息 注意,只能发送string和arrayBuffer类型的消息
            currentPort.postMessage(JSON.stringify({
                type:"change",
                message:`web ${Date.now()}`
            }))
        }
    }
</script>
</html>
